<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>聊天室</title>
		<script src="/vue"></script>
		<link rel="shortcut icon" href="/favicon.png" type="image/png" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="/jquery"></script>
		<style>
			body,
			html {
				height: 100%;
				width: 100%;
			}

			* {
				margin: 0;
				padding: 0;
			}

			[v-once] {
				display: none;
			}

			#top {
				text-align: center;
				background: lightgreen;
				height: 15vh;
				position: fixed;
				width: 100vw;
			}

			#top>h1 {
				height: 7.5vh;
				line-height: 7.5vh;
			}

			#top>h3 {
				height: 7.5vh;
				line-height: 7.5vh;
			}

			#inner {
				height: calc(100vh - 15vh - 3pc);
				word-break: break-all;
				padding-top: 15vh;
				overflow-y: scroll;
			}

			#inner>div {
				text-align: left;
			}

			#inner>::before {
				content: "";
				display: table;
				clear: both;
			}

			#inner>div>div {
				background-color: rgb(240, 240, 240);
				border-radius: 0.5pc;
				width: fit-content;
				padding: 0.2pc;
				float: left;
			}

			#inner>div.me {
				text-align: right;
			}

			#inner>div.me>div {
				background-color: rgb(150, 150, 255);
				border-radius: 0.5pc;
				width: fit-content;
				padding: 0.2pc;
				float: right;
				color: white;
			}

			#inner>div:last-of-type {
				margin-bottom: 5pc;
			}

			.login {
				z-index: 10000000;
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background: gray;
			}

			.login>div {
				background: white;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				padding: 1pc;
				border-radius: 1pc;
				height: fit-content;
				width: fit-content;
			}

			.login * {
				text-align: center;
			}

			.login input {
				margin: 0.5pc;
				border-radius: 0.5pc;
				padding: 0.5pc;
				border: solid 0.1px;
			}

			#foot {
				height: 3pc;
				position: fixed;
				bottom: 0;
				text-align: center;
			}

			#foot * {
				height: 3pc;
			}

			#foot input {
				position: fixed;
				left: 0;
				bottom: 0;
				width: calc(70vw - 2px);
				border: solid 1px;
				margin: 0;
			}

			#foot button {
				position: fixed;
				right: 0;
				bottom: 0;
				width: 30vw;
				height: calc(3pc + 2px);
				border: solid 1px;
				margin: 0;
			}

			#mask {
				position: fixed;
				z-index: 1000;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.3);
				color: white;
				line-height: 100vh;
				text-align: center;
				font-size: 2pc;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="mask" v-show="isMask" @click="mask">点击我！！！</div>
			<div id="top">
				<h3 onclick="location.href = '/'">聊天室<strong>(名字是红的才是管理员!!!)</strong></h3>
				<h3 onclick="localStorage.removeItem('che-chat-user');" v-once>{{user.name || "未登录"}}</h3>
				
			</div>
			<div ref="inner" id="inner">
				<div :class="{me: user.name === i.user}" v-for="i in chats">
					<p :style="{color: i.op ? 'red' : 'black'}">{{i.user}}</p>
					<div id="chat">{{i.chat}}</div>
				</div>
			</div>
			<div id="foot">
				<form @submit.prevent="post(chat)">
					<input v-model="chat" type="text" />
					<button @click="post(chat)">发送</button>
				</form>
			</div>
			<div id="bottom"></div>
			<div class="login" v-show="!isLogin">
				<div v-show="login">
					<h1>请登录！</h1>
					<form @submit.prevent="loginP(userInfo.user, userInfo.password)">
						<p v-show="userInfo.error">用户或密码错误！</p>
						<input type="text" @keyup="userInfo.error = false" v-model="userInfo.user"
							placeholder="用户" /><br />
						<input type="password" @keyup="userInfo.error = false" v-model="userInfo.password"
							placeholder="密码" /><br />
						<input type="submit" value="提交" /><br />
					</form>
					<input type="button" value="注册" @click="login = false" />
				</div>
				<div v-show="!login">
					<h1>请注册！</h1>
					<form @submit.prevent="setup(userInfo.user, userInfo.password)">
						<p v-show="userInfo.error">错误！</p>
						<input type="text" @keyup="userInfo.error = false" v-model="userInfo.user"
							placeholder="用户" /><br />
						<input type="password" @keyup="userInfo.error = false" v-model="userInfo.password"
							placeholder="密码" /><br />
						<input type="submit" value="提交" /><br />
					</form>
					<input type="button" value="登录" @click="login = true" />
				</div>
			</div>
		</div>
		<script>
			alert("提示：名字是红色的才是管理员！！！");
			var user = localStorage.getItem("che-chat-user");
			const vm = new Vue({
				el: "#app",
				data: {
					user: JSON.parse(user || "{}"),
					isLogin: Boolean(user),
					login: true,
					chats: [],
					userInfo: {
						name: "",
						password: "",
						error: false
					},
					chat: "",
					isMask: true
				},
				methods: {
					loginP(name, password) {
						fetch(`/login?user=${name}&password=${password}`).then(r => {
							return r.text();
						}).then(d => {
							if (d === "success") {
								localStorage.setItem("che-chat-user", JSON.stringify({
									name,
									password
								}));
								this.isLogin = true;
								this.user = {
									name,
									password
								};
								location.href = "/";
							} else {
								this.userInfo.error = true;
							}
						})
					},
					setup(name, password) {
						fetch(`/setup?user=${name}&password=${password}`).then(r => {
							return r.text();
						}).then(d => {
							if (d === "success") {
								localStorage.setItem("che-chat-user", JSON.stringify({
									name,
									password
								}));
								this.isLogin = true;
								this.user = {
									name,
									password
								};
								location.href = "/";
							} else {
								this.userInfo.error = true;
								this.login = true;
							}
						})
					},
					post(chat) {
						if (chat != "") {
							this.chat = "";
							fetch(`/post?chat=${chat}&user=${this.user.name}&password=${this.user.password}`);
						}
					},
					mask() {
						this.isMask = false;
						$(this.$refs.inner).scrollTop($(this.$refs.inner)[0].scrollHeight * 3);
					}
				},
				mounted() {
					if (this.user !== undefined) {
						fetch(`/login?user=${this.user.name}&password=${this.user.password}`).then(r => {
							return r.text();
						}).then(d => {
							if (d != "success") {
								this.isLogin = false;
							}
						})
					}
					const that = this;
					(function() {
						fetch("/get").then(r => {
							try {
								return r.json();
							} catch {
								console.log("a");
								arguments.callee();
							}
						}).then(d => {
							try {
								if (JSON.stringify(that.chats) !== JSON.stringify(d)) {
									$(that.$refs.inner).scrollTop($(that.$refs.inner)[0].scrollHeight * 3);
								}
								that.chats = d;
								arguments.callee();
							} catch {
								arguments.callee();
							}
						});
					})()
				}
			});
		</script>
	</body>
</html>